<template>
	<view class="hm-follow-card">
		<view class="container">
			<image class="backgroudImage" mode="aspectFill" :src="options.imgUrl" />
			<view class="diaryIcons">
				<text class="diaryText">{{ options.diaryContent }}</text>
				<view class="cardBottom">
					<view @click="gotToDiary">
						<image class="editeImage" src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/edite.png" mode="aspectFill"></image>
					</view>

					<view class="care">
						<image class="likeImage" :src="options.isNoThumbs === 1 ? thumbsImgYellow : thumbsImgHeart" @click="goThumbs()" mode="aspectFill"></image>
						<text class="likeNumbers">{{ options.likeNumber || 0 }}</text>
					</view>
					<button class="shareImage" @click="wxShare"></button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import http from '../../common/request.js';
import bridgeApi from '../../common/rayBridgeSDK.js';
export default {
	props: {
		options: {
			type: Object
		}
	},
	data() {
		var myDate = new Date().toDateString().split(' ');
		const date = [myDate[2], myDate[1], myDate[3]];
		return {
			thumbsImgHeart: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/heart.png',
			thumbsImgYellow: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/yellow.png',
			optionsData: {},
			likeType: 0, //点赞/取消点赞，状态
			popScreenList: []
		};
	},
	methods: {
		wxShare() {
			this.$emit('share');
		},
		gotToDiary(){
			//埋点
			this.$umaTrackEvent('enterDiary', {source: '首页'})
			uni.navigateTo({
				url: '/interaction/diary/index',
				animationDuration: 200,
				animationType: 'pop-in'
			})
		},
		goThumbs() {
			// isNoThumbs   1 点赞     0取消点赞
			let url = '';
			const data = { ...this.options };
			if (data.isNoThumbs) {
				url = '/api/cusBeautifulDiary/dataDecr';
				data.isNoThumbs = 0;
				this.likeType = 0;
			} else {
				url = '/api/cusBeautifulDiary/dataIncr';
				data.isNoThumbs = 1;
			}
			if (data.diaryType == 2) {
				//用户发表
				this.optionsData = {
					contentId: data.cusDiaryId,
					likeType: this.likeType,
					diaryType: data.diaryType
				};
			} else {
				//运维发表
				this.optionsData = {
					contentId: data.diaryId,
					likeType: this.likeType,
					diaryType: data.diaryType
				};
			}

			http(url, { method: 'POST', data: this.optionsData }).then(result => {
				data.likeNumber = result.data.count;
				const list = result.popScreen || [];
				if (list.length > 0) {
					this.popScreenList = list;
					this.$emit('show-activity', { showHonor: true, popScreenList: this.popScreenList });
				}

				this.$emit('update:options', data);
				this.$emit('careSuccess');
			});
		}
	}
};
</script>
<style scoped lang="less">
image {
	vertical-align: middle;
}

.hm-follow-card {
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: center;
	width: 100%;
}

.container {
	display: flex;
	position: relative;
	align-items: flex-start;
	flex-direction: column;
	background-color: #ffffff;
	width: 100%;
	height: 438rpx;
	overflow: hidden;
}

.backgroudImage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 438rpx;
	overflow: hidden;
}

.followButton {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-direction: row;
	margin-top: 58.44rpx;
	margin-left: 438rpx;
	background-color: #f64000;
	padding-right: 22rpx;
	padding-left: 20rpx;
	height: 48rpx;
}

.followText {
	opacity: 1;
	line-height: 35rpx;
	white-space: nowrap;
	color: #ffffff;
	font-size: 24rpx;
	font-weight: 400;
}

.cardBottom {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 36rpx;
}

.diaryIcons {
	margin-top: 188rpx;
	z-index: 1;
	height: 249rpx;
	background: rgba(0, 0, 0, 0.3);
	z-index: 0;
	width: 100%;
}

.diaryText {
	opacity: 1;
	width: 100%;
	color: #ffffff;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 28rpx;
	font-family: PingFangSC-Light, PingFang SC;
	font-weight: 200;
	color: rgba(255, 255, 255, 1);
	height: 120rpx;
	line-height: 46rpx;
	padding: 24rpx 28rpx 12px 28rpx;
}

.editeImage {
	width: 40rpx;
	height: 40rpx;
}

.shareImage {
	/* margin-top: 4rpx; */
	width: 40rpx;
	height: 40rpx;
	padding: 0;
	background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/share.png) no-repeat center;
	background-size: 100%;
	margin: 0 0 0 100rpx;
}

.shareImage::after {
	border: 0;
}

.fanNumbers {
	opacity: 1;
	margin-top: 4rpx;
	margin-left: 16rpx;
	width: 41rpx;
	height: 35rpx;
	line-height: 35rpx;
	white-space: nowrap;
	color: #ffffff;
	font-family: Helvetica;
	font-size: 24rpx;
	font-weight: normal;
}

.fanNumbersCompany {
	opacity: 1;
	margin-top: 4rpx;
	width: 22rpx;
	height: 35rpx;
	line-height: 35rpx;
	white-space: nowrap;
	color: #ffffff;
	font-size: 24rpx;
	font-weight: 400;
}
.care {
	display: flex;
	align-items: center;
	position: relative;
}
.likeImage {
	margin-left: 60rpx;
	width: 40rpx;
	height: 40rpx;
}

.likeNumbers {
	opacity: 1;
	white-space: nowrap;
	color: #ffffff;
	font-family: Helvetica;
	font-size: 24rpx;
	font-weight: normal;
	position: absolute;
	right: -30rpx;
}

.likeNumbersCompany {
	opacity: 1;
	margin-top: 5rpx;
	width: 22rpx;
	height: 35rpx;
	line-height: 35rpx;
	white-space: nowrap;
	color: #ffffff;
	font-size: 24rpx;
	font-weight: 400;
}
</style>
